<template>
  <div>
    <div class="uif1">
      <Header />
    </div>
    <div  class="uif2">
      <h1>个人信息</h1>
      <div  class="uif3">
        <el-image :src="src" class="image" width="100%" height="100%" @click="uploads"></el-image>
      </div>
      <br />
      <el-divider content-position="left" style="margin-top: 25%">
        <span  class="uif4"><b>个人签名：</b></span>
      </el-divider>
      <span>这家伙很懒，没有设置个人签名！</span>
      <br />
      <el-divider content-position="right">
        <span class="uif5"><b>功能选项</b></span>
      </el-divider>
      <div  class="uif6">
        <el-button
          type="primary"
          class="uif7"
          :icon="Edit"
          @click="router.push('/updateUser')"
          >修改信息</el-button
        >
      </div>
      <vipVue />
    </div>
    <el-divider direction="vertical"><i class="el-icon-mobile-phone"></i></el-divider>
    <userDetailVue />
    <el-dialog title="查看头像" v-model="dialogVisible" width="100%" :before-close="handleClose">
      <el-divider class="uif88" content-position="left">当前头像</el-divider>
      <div  class="uif8">
        <el-image :src="src" class="image" width="100%" height="100%" @click="uploads"></el-image>
      </div>
      <div  class="uif9">
        <el-divider content-position="right">更换头像</el-divider>
        <el-upload
          ref="uploadRef"
          class="upload-demo"
          :limit="1"
          :action="'/api/user/save/' + ruleForm.uid"
          :auto-upload="false"
        >
          <template  class="uif10" #trigger>
            <el-button type="primary"  class="uif11">选择头像</el-button>
          </template>
          <el-button type="success"  class="uif12" @click="submitUpload">
            确认上传
          </el-button>
          <template #tip>
            <div class="el-upload__tip">只能上传一张图片,jpg或png类型且文件小于500kb</div>
          </template>
        </el-upload>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import Header from '@/components/Client/GlobalCom/mobile/HeaderMobile'
import userDetailVue from '@/components/Client/userInfoCom/mobile/userDetailMobile.vue'
import vipVue from '@/components/Client/userInfoCom/mobile/vipMobile'
import { ref, reactive, onMounted } from 'vue'
import { Edit } from '@element-plus/icons-vue'
import router from '@/router'
import axios from 'axios'
import { ElMessage } from 'element-plus'
const src = ref('')
const ruleForm = reactive({
  uid: '',
  username: '',
  gender: '',
  password: '',
  addTime: '',
  phone: '',
  email: '',
  headSrc: ''
})
const dialogVisible = ref(false)
const uploadRef = ref()
onMounted(() => {
  if (document.documentElement.clientWidth > document.documentElement.clientHeight) {
    router.push('/userInfo')
  }
  ruleForm.uid = JSON.parse(sessionStorage.getItem('uid'))
  axios.get('/api/user/getUserByUid/' + ruleForm.uid).then((res) => {
    if (res.data !== null) {
      sessionStorage.setItem('headSrc', JSON.stringify(res.data.headsrc))
      ruleForm.headSrc = res.data.headsrc
      src.value = require('@/assets/UserPic/' + res.data.headsrc)
    } else {
      ElMessage({
        showClose: true,
        message: '加载失败！',
        type: 'error'
      })
    }
  })
})
const uploads = () => {
  dialogVisible.value = true
}
const submitUpload = () => {
  uploadRef.value.submit()
  axios.get('/api/user/getUserByUid/' + ruleForm.uid).then((res) => {
    if (res.data !== null) {
      sessionStorage.setItem('headSrc', JSON.stringify(res.data.headsrc))
      dialogVisible.value = false
      alert('成功上传！')
      router.go(0)
    } else {
      ElMessage({
        showClose: true,
        message: '上传失败！',
        type: 'error'
      })
    }
  })
}
</script>
<style lang="scss" scoped>
  .uif1{
    background-image: linear-gradient(to right, #434343 0%, black 100%)
  }
  .uif2{
    width: 100%; height: 480px; float: left
  }
  .uif3{
    height: 50px; width: 40%; margin-left: 30%
  }
  .uif4{
    float: center
  }
  .uif5{
    float: left
  }
  .uif6{
    margin-top: 20px; float: left
  }
  .uif7{
    margin-left: 50px; margin-bottom: 50px
  }
  .uif8{
    height: 50px; width: 20%; margin-left: 40%
  }
  
  .uif88{
    margin-top: -2%
  }
  .uif9{
    width: 100%; height: 100px; margin-top: 2%; margin-left: 2%
  }
  .uif10{
    margin-top: 1%
  }
  .uif11{
    margin-left: -10%; margin-top: 1%
  }
  .uif12{
    margin-left: 1%
  }
</style>
